<template>
  <div :style="{ paddingTop: paddingTop }">
    <div class="ie-container--fluid">
      <el-image
        src="/static/image/page_default.jpg"
        style="width: 100%; height: 667px; position: absolute"
        fit="cover"
      />
      <div class="ie-container" style="padding-top: 80px; padding-bottom: 100px;">
        <div class="title" style="margin-bottom: 128px;">
          <h2>合作案例</h2>
          <p>COOPERATION CASES</p>
        </div>
        <a-row :gutter="40">
          <a-col
            v-for="(item, $index) in cases"
            :key="$index"
            :sm="12"
            :xs="24"
          >
            <div class="block">
              <div class="block-box">
                <div class="ctx">
                  <span class="s">{{ item.s }}</span>
                  <h3>{{ item.t }}</h3>
                  <p
                    v-for="p in item.p"
                    :key="p"
                  >{{ p }}</p>
                </div>
                <div
                  :class="[
                    'image-box', {
                    bordered: item.img.length === 1
                  }]"
                >
                  <div class="image-box__track">
                    <IeImage
                      name="fadeInRight"
                      v-for="img in item.img"
                      :key="img"
                      :img-src="'/static/image/case/' + img"
                      :height="360"
                    />
                    <!-- <el-image
                      v-for="img in item.img"
                      :key="img"
                      :src="'/static/image/case/' + img"
                      style="height: 360px;"
                      lazy
                    /> -->
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useMq } from 'vue3-mq'

const mq = useMq()
const paddingTop = computed(() => {
  return mq.mdMinus ? '80px' : '100px'
})

const cases = [
  {
    t: '智慧城市外部网站',
    p: [
      '客户定制系统集成',
      '内部系统数据采集、脱敏，并提供对外服务',
      '多语言适配及布局',
      '平台可靠性、安全性设计'
    ],
    s: '综合门户',
    img: ['case_01.png']
  },
  {
    t: '艺术品平台',
    p: [
      '全平台兼容与适配',
      '电子名片、无纸化线下业务流程'
    ],
    s: 'H5 应用',
    img: ['case_02_1.png', 'case_02_2.png']
  },
  {
    t: '建筑设计网站',
    p: [
      '客户定制系统集成',
      '内部系统数据采集、脱敏，并提供对外服务',
      '多语言适配及布局',
      '平台可靠性、安全性设计'
    ],
    s: '平台型应用',
    img: ['case_03.png']
  },
  {
    t: '纪录片网站',
    p: [
      '独立非虚构影视创作者的资源整合网站，以分享制作资源，资金、学习资源，发布业内合作机会为主要目的，集成多种格式在线预览。'
    ],
    s: '平台型应用',
    img: ['case_04.png']
  },
  {
    t: '安防集控平台',
    p: [
      '独立非虚构影视创作者的资源整合网站，以分享制作资源，资金、学习资源，发布业内合作机会为主要目的，集成多种格式在线预览。'
    ],
    s: '物联网',
    img: ['case_05.png']
  },
  {
    t: '政务工作应用',
    p: [
      '全平台兼容与适配',
      '电子名片、无纸化线下业务流程'
    ],
    s: 'APP',
    img: ['case_06_1.png', 'case_06_2.png']
  },
  {
    t: '企业官网',
    p: [
      '独立非虚构影视创作者的资源整合网站，以分享制作资源，资金、学习资源，发布业内合作机会为主要目的，集成多种格式在线预览。'
    ],
    s: '企业官网',
    img: ['case_07.png']
  },
  {
    t: '企业官网',
    p: [
      '独立非虚构影视创作者的资源整合网站，以分享制作资源，资金、学习资源，发布业内合作机会为主要目的，集成多种格式在线预览。'
    ],
    s: '企业官网',
    img: ['case_08.png']
  },
  {
    t: '固定资产管理平台',
    p: [
      '独立非虚构影视创作者的资源整合网站，以分享制作资源，资金、学习资源，发布业内合作机会为主要目的，集成多种格式在线预览。'
    ],
    s: '物联网',
    img: ['case_09.png']
  },
  {
    t: '在线教育应用',
    p: [
      '全平台兼容与适配',
      '电子名片、无纸化线下业务流程'
    ],
    s: 'APP',
    img: ['case_10_1.png', 'case_10_2.png']
  },
  {
    t: '社团活动小程序',
    p: [
      '全平台兼容与适配',
      '电子名片、无纸化线下业务流程'
    ],
    s: '微信小程序',
    img: ['case_11_1.png', 'case_11_2.png']
  },
  {
    t: '企业官网',
    p: [
      '独立非虚构影视创作者的资源整合网站，以分享制作资源，资金、学习资源，发布业内合作机会为主要目的，集成多种格式在线预览。'
    ],
    s: '企业官网',
    img: ['case_12.png']
  },
]
</script>

<style lang="less" scoped>
.page {
  background-color: #F8F9FA;
}

.title {
  line-height: 1.5;
  text-align: center;

  h2 {
    color: #272E3B;
    font-size: 32px;
    margin-bottom: 18px;
  }

  p {
    color: #7D7D7D;
    font-size: 16px;
  }
}

.block {
  height: 480px;
  background-color: #FFF;
  box-shadow: 0 8px 24px 8px rgba(0,0,0,0.08);
  border-radius: 16px;
  margin-bottom: 40px;

  &-box {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 60px 0 60px 50px;
    overflow: hidden;
  }

  .ctx {
    width: 60%;
    padding-right: 60px;
    display: inline-block;

    .s {
      background: rgba(22,93,255,0.10);
      border: 2px solid rgba(22,93,255,0.60);
      border-radius: 18px;
      font-size: 16px;
      font-weight: bold;
      line-height: 32px;
      padding: 0 10px;
      color: #165DFF;
      display: inline-block;
      margin-bottom: 60px;
    }

    h3 {
      font-size: 24px;
      color: #2D2D2D;
      margin-bottom: 24px;
    }

    p {
      font-size: 15px;
      color: #999;
      text-align: justify;
      line-height: 28px;
    }
  }

  .image-box {
    position: absolute;
    top: 50%;
    left: 60%;
    right: 0;
    transform: translateY(-50%);

    &__track {
      width: 250%; // 40% => 2/5 => 5/2 => 250%
    }

    .animate-image--box {
      display: inline-block;
      box-shadow: 0 8px 24px 8px rgba(0,0,0,0.08);
      border-radius: 18px;
      // box-sizing: content-box;

      & + .animate-image--box {
        margin-left: 24px;
      }

      :deep(.van-image) {
        border-radius: 15px;
        display: block;
        overflow: hidden;
      }
    }

    &.bordered {

      .animate-image--box {
        border: 4px solid #333;
        background-color: #333;

        :deep(img) {
          transform: scale(1.01);
        }
      }
    }
  }
}

.ie-layout.mini {

  .block {
    height: 440px;

    &-box {
      padding: 40px 0 40px 30px;
    }
  }
}
</style>